<template>
  <div>
    <div class="q1">
      <span @click="q2">《</span><span>{{ name }}</span>
    </div>
    <img :src="imgs" alt="" />
    <ul>
      <li v-for="(item, index) in ges" :key="index" class="asd">
        <p>{{ item.name }}</p>
        <p>{{ item.singer }}</p>
      </li>
    </ul>
  </div>
</template>
//
<script>
// import { getSongsBySinger } from "./service.js";
import service from "./service.js";
export default {
  data() {
    return {
      mid: "",
      imgs: "",
      name: "",
      ges: [],
      geurl: "",
      mids: [],
    };
  },
  methods: {
    getMidAndName(q1) {
      // console.log(q1);
      this.mid = q1.params.mid;
      this.imgs = q1.query.img;
      this.name = q1.query.name;
      this.lb(this.mid);
      // this.q22(this.mid);
    },
    q2() {
      this.$router.history.go(-1);
    },
    // q3(q) {
    //   console.log(q.name, q.singer, q.pic, q.mid);
    //   this.$router.push({
    //     path: `/bfq/${q.mid}?name=${q.singer}&img=${q.pic}&getan=${q.name}`,
    //   });
    // },
    async lb(q) {
      // console.log(q);
      let { result } = await service.songList(q);
      // console.log(result);
      this.ges = result.songs;
      this.hqmids(this.ges);
    },
    hqmids(arr) {
      console.log(arr);
      for (let i = 0; i < arr.length; i++) {
        this.mids.push(arr[i].mid);
      }
      this.q22(this.mids);
    },
    async q22(q) {
      let res = await service.getUrlByMid(q);
      console.log(res);
      for (let i = 0; i < res.urls.length; i++) {
        this.ges[i].url = res.urls[i];
      }
    },
  },
  async mounted() {
    this.getMidAndName(this.$route);
    // console.log("mounted");
  },
  watch: {
    $route(newV, oldV) {
      // 路由没有变化不在执行
      if (newV.fullPath === oldV.fullPath) return false;
      console.log("路由改变");
      // console.log(newV, oldV);
      this.getMidAndName(newV);
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../style/index.less";
img {
  .w(375);
}
.q1 {
  .w(375);
  display: flex;
  position: fixed;
  top: 0;
  z-index: 1;
  font-size: 8rem;
  color: beige;
  align-items: center;
}
.q1 span:nth-child(1) {
  color: gold;
  .w(40);
  .h(40);
  margin-left: 3rem;
  // margin-right: 35rem;
}
.q1 span:nth-child(2) {
  flex: 1;
  text-align: center;
}
.asd {
  background: black;
  color: gold;
  padding: 5rem 0 0 5rem;
}
.asd p:nth-child(1) {
  margin-bottom: 3rem;
}
.asd p:nth-child(2) {
  color: white;
}
</style>
